<template>
  <el-container>
    <!-- 左侧边栏 -->
    <navbar :Collapse="isCollapse"></navbar>
    <el-container>
      <!-- 头部导航栏 -->
      <headernav></headernav>
      <el-main :class="{'main-body':true,'main-body-lg':isCollapse}">
        <div class="main-body-white">
          <!-- 主体内容 -->
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import navbar from './NavBar';
  import headernav from './Header';
  export default {
    data(){
      return {
        isCollapse: false,
        client:JSON.parse(sessionStorage.getItem('user'))
      };
    },
    computed:{
    },
    components: {
      navbar,
      headernav
    },
    mounted(){
        this.$root.Bus.$on('isCollapse',value=>{
            this.isCollapse = value;
        });
    },
    methods:{
      
    }
  }
</script>
<style scoped>
  .main-body{
    background:#f7f6f6;
    position: absolute;
    top: 60px;
    left: 199px;
    transition:left .3s;
    transition-timing-function:ease-in-out;
    right: 0;
    bottom: 0
  }
  .main-body-lg{
    left:63px;
  }
  .main-body-white{
    background: #fff;
    padding: 0 15px 25px 15px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border: 1px solid #ebeef5;
    border-radius: 2px;
    min-width: 708px;
  }
</style>

